<template>
	<view>
		<view class="content">
			<image class="logo" src="@/static/images/logo.png"></image>
			<button v-show="loginForm.code == ''" @click="toLogin">
				<u-icon name="weixin-fill" size="30" color="#55aa00"></u-icon>
				微信用户一键登录
			</button>
			<view v-show="loginForm.code == ''" class="text-area">
				<u-checkbox-group v-model="isAgreement" size="14">
					<u-checkbox shape="circle" name="yes"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement">
					<text>登录代表您已同意</text>
					<text class="a-text" @click="toAgreement(1)">《食尚学府用户服务协议》</text>
					<text>、</text>
					<text class="a-text" @click="toAgreement(2)">《隐私协议》</text>
				</view>
			</view>

			<button v-show="loginForm.code" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				一键授权手机号
			</button>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/login/index.js'
	import appinfo from '@/utils/appInfo.js'
	export default {
		data() {
			return {
				isAgreement: [],
				loginForm: {
					code: '',
					phone: '',
				},
			};
		},
		onLoad() {
			// console.log(appinfo)
		},
		onShow() {
			uni.hideHomeButton()
		},
		methods: {
			// 微信授权登录
			toLogin() {
				let that = this
				uni.showLoading({
					title: '授权中'
				})
				if (this.isAgreement.length > 0) {
					uni.getUserInfo({
						success: (res) => {
							console.log(res);
							uni.setStorageSync('userInfo', res.userInfo)
							that.loginForm.name = res.userInfo.nickName
							that.loginForm.sculpture = res.userInfo.avatarUrl
							uni.login({
								provider: 'weixin', //使用微信登录
								success: (loginRes) => {
									// console.log(loginRes);
									that.loginForm.code = loginRes.code
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: '微信授权成功，请授权手机号'
									})
								},
								fail: (error) => {
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: '获取用户code失败，请重试'
									})
								}
							})
						}
					})

				} else {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '请先阅读并同意相关协议'
					})
				}
			},
			toAgreement(type) {
				if (type === 1) {
					console.log('aaaa')
				} else if (type === 2) {
					console.log('bbbb')
				}
			},
			// 获取手机号code
			getPhoneNumber(e) {
				uni.showLoading({
					title: '授权中'
				})
				if (e.detail.code) {
					this.getAccess_token(e.detail.code)
				} else {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '用户取消授权，登录失败'
					})
				}
			},
			// 获取临时access_token
			getAccess_token(code) {
				uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/token',
					data: {
						grant_type: 'client_credential',
						appid: appinfo.appid,
						secret: appinfo.appSecret
					},
					success: (res) => {
						// console.log( 'access_token：' + res.data.access_token);
						this.analysisPhoneNumber(code, res.data.access_token)
					},
					fail: (error) => {
						uni.showToast({
							icon: 'none',
							title: '获取access_token失败，请重试'
						})
						return false
					}
				})
			},
			//解析手机号
			analysisPhoneNumber(code, access_token) {
				let that = this
				uni.request({
					url: 'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=' + access_token,
					method: 'post',
					data: {
						code: code
					},
					success: (res) => {
						// console.log(res.data.phone_info.phoneNumber);
						that.loginForm.phone = res.data.phone_info.phoneNumber
						login(that.loginForm).then(response => {
							console.log(response)
							if (response.data.code === 200) {
								uni.setStorageSync('openid', response.data.openid)
								uni.setStorageSync('token', response.data.token)
								uni.setStorageSync('phone', response.data.user.phone)
								uni.hideLoading()
								uni.showToast({
									icon: 'success',
									title: '登录成功'
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 1000)
							} else {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '登录失败，请重试'
								})
								return false
							}
						})
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '解析手机号失败，请重试'
						})
						return false
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 20upx;
		box-shadow: 20px 20px 60px #cccccc,
			-20px -20px 60px #ffffff;
	}

	button {
		margin-top: 100rpx;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 10px;
		font-family: inherit;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.4px;
		color: #56687d;
		background-color: #e0e8ef;
		border-style: solid;
		border-width: 2px 2px 2px 2px;
		border-color: rgba(255, 255, 255, 0.555);
		border-radius: 20rpx;
		padding: 10rpx 60rpx;
		-webkit-transform: translate(0px, 0px) rotate(0deg);
		-ms-transform: translate(0px, 0px) rotate(0deg);
		transform: translate(0px, 0px) rotate(0deg);
		-webkit-transition: 0.2s;
		transition: 0.2s;
		-webkit-box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
		box-shadow: -4px -2px 16px 0px #ffffff, 4px 2px 16px 0px rgb(95 157 231 / 48%);
	}

	button:after {
		border: none;
	}

	button:active {
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.text-area {
		display: flex;
		margin-top: 100rpx;
		padding: 0 30rpx;
	}

	.agreement {
		font-size: 24rpx;
	}

	.a-text {
		color: #00aaff;
	}
</style>